<template>
	<view :class="['nothing',{fixed: fixed}]" :style="{'background-color': bgColor, top: top + 'rpx',paddingTop: fixed?'0':'30rpx',paddingBottom: fixed?'0':'30rpx',height: fixed?'auto':'100%',bottom: fixed?`${bottom && bottom.indexOf('calc')!=-1?bottom:`${bottom}rpx`}`:''}">
		<view :class="['nothing-box',{ high: isHigh }]" v-if="!custom">
			<image :src="icon" mode="aspectFit" v-if="icon"></image>
			<view>{{text}}</view>
			<view class="btn" v-if="showLogin" @click="goLogin">立即登录</view>
			<view class="btn" v-if="showBtn" @click="goProList">立即逛逛</view>
		</view>
		<slot v-else></slot>
	</view>
</template>

<script>
	export default {
		props: {
			bottom: {
				type: Number | String,
				default: 0
			},
			custom: {
				type: Boolean,
				default () {
					return false
				}
			},
			isHigh: {
				type: Boolean,
				default: false
			},
			top: {
				type: String,
				default: '0'
			},
			bgColor: {
				type: String,
				default: '#F8F8F8'
			},
			fixed: {
				type: Boolean,
				default: false
			},
			icon: {
				type: String,
				default: ''
			},
			text: {
				type: String,
				default: '暂无数据'
			},
			showBtn: {
				type: Boolean,
				default: false
			},
			showLogin: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			goProList(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/search/search-result'
				})
			},
			goLogin(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/login/login'
				})
			}
		},
		mounted(){
			
		}
	}
</script>

<style lang="scss">
	.nothing{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
		font-size: 28rpx;
		color: #444;
		background-color: #F8F8F8;
		font-weight: bold;
		&.fixed{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		.nothing-box{
			text-align: center;
			&.high{
				padding-top: 60rpx;
			}
			.btn{
				margin-top: 30rpx;
				padding: 20rpx 30rpx;
				background-color: #141414;
				color: #FFF;
				border-radius: 8rpx;
			}
		}
		image{
			vertical-align: top;
			width: 218rpx;
			height: 207rpx;
			margin-bottom: 50rpx;
		}
	}
</style>
